<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>

        <script>
            window.onload = function () {
                /* 
                    全选功能
                    取消
                    反选
                    提交
                    小checkbox和大checkbox同步
                */

                /* 
                    全选功能
                        - 点击按钮后，使四个多选框都变成选中状态
                */

                // 获取四个多选框
                const hobbies = document.getElementsByName("hobby")

                // 获取全选按钮
                const allBtn = document.getElementById("all")

                const checkAllBox = document.getElementById("check-all")

                // 为按钮绑定单级响应函数
                allBtn.onclick = function () {
                    // 将多选框设置为选中状态
                    for (let i = 0; i < hobbies.length; i++) {
                        hobbies[i].checked = true
                    }

                    checkAllBox.checked = true
                }

                /* 
                    取消功能
                        - 点击取消按钮后，取消所有的选中的状态
                */

                // 获取取消按钮
                const noBtn = document.getElementById("no")
                noBtn.onclick = function () {
                    for (let i = 0; i < hobbies.length; i++) {
                        hobbies[i].checked = false
                    }

                    checkAllBox.checked = false
                }

                /* 
                    反选功能
                        - 点击按钮后，选中的取消，没选中的选中
                */
                const reverseBtn = document.getElementById("reverse")

                reverseBtn.onclick = function () {
                    for (let i = 0; i < hobbies.length; i++) {
                        hobbies[i].checked = !hobbies[i].checked
                    }

                    // 获取所有选中的checkbox
                    const checkedBox = document.querySelectorAll(
                        "[name=hobby]:checked"
                    )

                    // 判断hobbies是否全选
                    if (hobbies.length === checkedBox.length) {
                        checkAllBox.checked = true
                    } else {
                        checkAllBox.checked = false
                    }
                }

                /* 
                    提交按钮
                        - 点击按钮后，将选中的内容显示出来
                */
                const sendBtn = document.getElementById("send")
                sendBtn.onclick = function () {
                    for (let i = 0; i < hobbies.length; i++) {
                        // if (hobbies[i].checked) {
                        //     alert(hobbies[i].value)
                        // }
                        hobbies[i].checked && alert(hobbies[i].value)
                    }
                }

                /* 
                    check-all
                        - 全选checkbox发生变化后，将小的checkbox和它同步
                */

                checkAllBox.onchange = function () {
                    // console.log(this)
                    // 在事件的响应函数中，响应函数绑定给谁 this就是谁（箭头函数除外）

                    for (let i = 0; i < hobbies.length; i++) {
                        hobbies[i].checked = this.checked
                    }
                }

                /* 
                    使全选checkbox和四个checkbox进行同步
                        如果四个全选了，则全选checkbox也选中
                        如果四个没全选，则全选checkbox也不选中
                */

                for (let i = 0; i < hobbies.length; i++) {
                    hobbies[i].onchange = function () {
                        // 获取所有选中的checkbox
                        const checkedBox = document.querySelectorAll(
                            "[name=hobby]:checked"
                        )

                        // 判断hobbies是否全选
                        if (hobbies.length === checkedBox.length) {
                            checkAllBox.checked = true
                        } else {
                            checkAllBox.checked = false
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <div>
            <form action="#">
                <div>
                    请选择你的爱好：
                    <input type="checkbox" id="check-all" /> 全选
                </div>
                <div>
                    <input type="checkbox" name="hobby" value="乒乓球" /> 乒乓球
                    <input type="checkbox" name="hobby" value="篮球" /> 篮球
                    <input type="checkbox" name="hobby" value="羽毛球" /> 羽毛球
                    <input type="checkbox" name="hobby" value="足球" /> 足球
                </div>
                <div>
                    <button type="button" id="all">全选</button>
                    <button type="button" id="no">取消</button>
                    <button type="button" id="reverse">反选</button>
                    <button type="button" id="send">提交</button>
                </div>
            </form>
        </div>
    </body>
</html>
